import React, { Component } from 'react'
import './newSing.css/contain.css'
import { getSongdetail } from "../../api"
import img1 from '../images/17_03.jpg'
import img2 from '../images/18_03.jpg'
import img3 from '../images/19_03.jpg'
import { withRouter } from "react-router-dom"
class Contain extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            arr:''
        }
    }
    componentDidMount() {
        
        // console.log(this.props.location)
        let id = this.props.location.state.id  
        console.log(id)      
        getSongdetail(id).then(res => {
            // console.log(res.data)
            let arr={
                num: res.data.playlist.tracks.length,
                subscribedCount: res.data.playlist.subscribedCount,
                idx:this.props.location.state.id  
            }
            this.setState({
                list: res.data.playlist.tracks,
                arr:arr
            })
        })
    }
    going(id,idx){
        this.props.history.push('/play?id='+id)
    }
    go(idx){
        this.props.history.push('/play',{idx:idx})
    }
    render() {
        console.log(this.state)
        return (
            <div>
                <div className='contain'>
                    <img src={img1} alt="" className='contain-img' onClick={this.go.bind(this,this.state.arr.idx)}/>
                    <h2>播放全部</h2>
                    <span>(共{this.state.arr.num}首)</span>
                    <h3>+收藏({this.state.arr.subscribedCount})</h3>                     
                    {this.state.list.map((item, index) => {                        
                        return (                           
                            <div key={index} className='contain-one' onClick={this.going.bind(this,item.id)}>
                                <span className='contain-one-span'>{index+1}</span>
                                <p>{item.al.name}</p>
                                <h6>{item.ar[0]["name"]}--</h6>
                                <em>{item.al.name}</em>
                                <img src={img2} alt="" className='contain-one-img1'/>
                                <img src={img3} alt="" className='contain-one-img2'/>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export default withRouter(Contain)